<template>
<!-- calendar/addRemind/addRemind.wxml -->
<view class="add-remind">
  <view class="picker-group">
    <picker mode="multiSelector" :range="projects" @change="changeProject" @columnchange="projectColumnChange" range-key="name">
      <view class="picker">
        <view class="left">
          <view class="title">办理项目</view>
        </view>
        <view class="right">
          <view class="value">{{currentProject[0].name}}-{{currentProject[1].name}}</view>
          <view class="arrow">
            <image src="/static/images/sys/right.png"></image>
          </view>
        </view>
      </view>
    </picker>
    <picker mode="date" :value="date" @change="dateChange">
      <view class="picker">
        <view class="left">
          <view class="title">办理项日期</view>
        </view>
        <view class="right">
          <view class="value">{{date}}</view>
          <view class="arrow">
            <image src="/static/images/sys/right.png"></image>
          </view>
        </view>
      </view>
    </picker>
  </view>
  <view class="add-body">
    <view class="need-time">
      <text>该办事项目所需要的时间为</text>
    </view>
    <view class="card">
      <view class="date">
        <text class="time-left">{{needTime}}</text>
        <text class="time-type">个{{dateType}}</text>
      </view>
      <view class="desc">{{dateType === '自然日' ? '（自然日包括周末以及节假日）' : '（工作日不包括周末以及节假日）'}}</view>
      <button class="add-control" @tap="addToRemind">添加到日历</button>
    </view>
    <view class="tips">我们将于办理完成当天给您发送通知，请同意接受</view>
  </view>
</view>
</template>

<script>
const util = require("../../../../utils/util.js");
const app = getApp();
const tmplIds = ["Us5cSgjk6oFqj6UxBMaob9pUbEKTXD4D15cyINwtCPM"];
let firstProjectIndex; // 两级联动第一列选择结果
// 两级联动第一列选择结果
let secondProjectIndex; // 两级联动第二列选择结果
// 两级联动第二列选择结果
let fatherProjects = []; // 全部父类数组
// 全部父类数组
let sonProjects = []; // 父类对应的子类数组
// 父类对应的子类数组
let projectList = []; // 全部办事类型
// 全部办事类型
const dateType = {
  "1": "工作日",
  "2": "自然日"
}; // 办事日期类型映射关系
// 办事日期类型映射关系
let rid, type, rdate; // 办事id、办事时间类型、时间间隔，请求使用
// 办事id、办事时间类型、时间间隔，请求使用
let toggleCollection = true;

export default {
  data() {
    return {
      projects: [],
      currentProject: [],
      date: "",
      projectAttr: {
        dateLeft: 20,
        timeType: "自然日"
      },
      needTime: "0",
      dateType: "工作日",
      scroll: false
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    // util.colleation(this, "办事提醒日历");
    toggleCollection = true;
    util.getUrl(app.globalData.url).then(res => {
      // util.login().then(res => {
      // app.openid = res.data.openid;
      util.bstrequest('calendar.php', {
        ac: "type"
      }, "POST").then(res => {
        projectList = JSON.parse(JSON.stringify(res.data.data));
        fatherProjects = projectList.filter(v => v.pid === "0");
        sonProjects = projectList.filter(v => v.pid === fatherProjects[0].id);
        this.projects.push(fatherProjects);
        this.projects.push(sonProjects);
        rid = sonProjects[0].id;
        type = sonProjects[0].type;
        rdate = sonProjects[0].rdate;
        this.setData({
          projects: this.projects,
          date: util.formatTime(new Date()).split(" ")[0].split("/").join("-"),
          currentProject: [this.projects[0][0], this.projects[1][0]],
          needTime: sonProjects[0].rdate,
          dateType: dateType[sonProjects[0].type]
        });
      });
    }); // });
  },
  onShareAppMessage: function () {
    return {
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  methods: {
    // 办事项目
    changeProject(e) {
      firstProjectIndex = e.detail.value[0];
      secondProjectIndex = e.detail.value[1] ? e.detail.value[1] : 0;
      rid = this.projects[1][secondProjectIndex].id;
      type = this.projects[1][secondProjectIndex].type;
      rdate = this.projects[1][secondProjectIndex].rdate;
      this.setData({
        currentProject: [this.projects[0][firstProjectIndex], this.projects[1][secondProjectIndex]],
        needTime: this.projects[1][secondProjectIndex].rdate,
        dateType: dateType[this.projects[1][secondProjectIndex].type]
      });
    },

    // 两级联动
    projectColumnChange(e) {
      let column = e.detail.column;
      let value = e.detail.value;
      if (column === 0) this.projects[1] = projectList.filter(v => v.pid === fatherProjects[value].id);
      this.setData({
        projects: this.projects
      });
    },

    dateChange(e) {
      this.setData({
        date: e.detail.value
      });
    },

    // 订阅消息
    addToRemind(e) {
      uni.requestSubscribeMessage({
        tmplIds,
        success: res => {
          if (res[`${tmplIds[0]}`] === "accept") {
            // 接受订阅消息，发送请求
            const $addRemind = {
              ac: "addRemind",
              openid: uni.getStorageSync("openid"),
              rid,
              rdate,
              type,
              starttime: this.date
            };
            util.bstrequest('calendar.php', $addRemind, "POST").then(res => {
              if (res.data.state === 1) {
                uni.showModal({
                  title: '添加成功',
                  content: '添加办事提醒成功',
                  showCancel: false,
                  confirmText: '确定',
                  confirmColor: '#3CC51F',
                  success: result => {
                    if (result.confirm) uni.navigateBack();
                  }
                });
              } else {
                uni.showToast({
                  title: '添加失败，请稍后重试！',
                  icon: 'none'
                });
              }
            });
          } else if (res[`${tmplIds[0]}`] === "reject") {
            // 用户拒接接受订阅消息
            uni.showToast({
              title: '添加失败，请同意接受消息！',
              icon: 'none'
            });
          }
        }
      });
    },

    onPageScroll() {
      if (toggleCollection) {
        this.setData({
          scroll: true
        });
        toggleCollection = false;
      }
    },

    closeCollection() {
      toggleCollection = false;
    },

    openCollection() {
      toggleCollection = true;
    }

  }
};
</script>
<style>
/* calendar/addRemind/addRemind.wxss */

page {
    background-color: #F9F9F9;
}

picker {
    padding: 0 40rpx;
}

.picker-group {
    background-color: #ffffff;
}

.picker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 2rpx solid #F7F7F7;
}

.right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.value {
    font-size: 28rpx;
    color: #7E7E7E;
    margin-right: 26rpx;
}

.arrow image {
    width: 14rpx;
    height: 25rpx;
}
.add-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.need-time {
    margin-top: 30rpx;
    font-size: 30rpx;
    color: #232323;
    font-weight: 500;
    text-align: center;
}
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 462rpx;
    height: 320rpx;
    margin-top: 34rpx;
    background-color: #ffffff;
    color: #232323;
}
.date {
    font-size: 42rpx;
    font-weight: bold;
}
.time-left {
    margin-right: 14rpx;
    font-size: 80rpx;
}
.desc {
    font-size: 22rpx;
    color: #B4B4B4;
}
.add-control {
    margin-top: 34rpx;
    background-color: #ff6600;
    opacity: .6;
    font-size: 22rpx;
    color: #ffffff;
}
.tips {
    margin-top: 32rpx;
    text-align: center;
    font-size: 22rpx;
    color: #B4B4B4;
}
</style>